<template>
  <!-- 定期报告-->
  <div
    class="report"
    v-if="$utils.getPc() == 1"
    @mouseleave="mouseleave()"
    @mouseenter="mouseenter()"
  >
    <title-line class="title" :title="$utils.getNavName('investorsReport')" />

    <time-line
      class="time-line"
      :list="timeList"
      @change="timeLineChanage"
      :isloop="isLoop"
    />
    <div class="list">
      <a
        :href="item.url || item.videofile"
        class="item"
        v-for="item in data?.article"
        :key="item.id"
        @click="detail(item)"
      >
        <img class="img" :src="item.webimages" />
        <div class="title-t">{{ item.name }}</div>
      </a>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="total"
        @current-change="pageChange"
      />
    </div>
  </div>

  <div class="reportMobile" v-if="$utils.getPc() == 2">
    <title-line class="title" :title="$utils.getNavName('investorsReport')" />

    <time-line class="time-line" :list="timeList" @change="timeLineChanage" />
    <div class="list">
      <a
        :href="item.url || item.videofile"
        class="item"
        v-for="item in data?.article"
        :key="item.id"
      >
        <img class="img" :src="item.mobileimages" />
        <div class="title-t">{{ item.name }}</div>
      </a>
    </div>

    <div class="pagination" @click="nextPage">
      <!-- <more-detail name="加载更多" @click="more" /> -->
      <div class="text">加载更多</div>
      <img
        class="ic"
        v-if="page < total"
        src="../../../assets/image/publice/bottom-arrow.png"
      />
      <img
        class="ic"
        v-if="page == total"
        src="../../../assets/image/publice/top-arrow.png"
      />
    </div>
  </div>
</template>

<script>
import timeLine from "../../../components/time-line.vue";
export default {
  components: { timeLine },
  data() {
    return {
      page: 1,
      total: 1,

      data: { article: [] },
      year: "",
      timeList: [],
      title: "定期报告",
      isLoop: true,
    };
  },

  mounted() {
    //获取页面标题
    //this.title = this.$utils.getNavName("investorsReport");
    this.getTimeData();
  },
  methods: {
    /**
     * 移出
     */
    mouseleave() {
      this.isLoop = true;
    },
    /**
     * 移入
     */
    mouseenter() {
      this.isLoop = false;
    },
    /**
     * 获取时间线数据
     */
    async getTimeData() {
      try {
        //获取时间线数据
        const time = await this.$request.get("/khcommon/timeLine", {
          params: {
            cid: this.$utils.getNavId("investorsReport"),
          },
        });
        this.timeList = time.data;
        this.year = this.timeList?.[0]?.year;
        this.getData();

        this.$emit("change", 2);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    /**
     * 获取列表数据
     */
    async getData() {
      try {
        // 定期报告pc8个一页  移动端4个一页
        let num = 8;
        if (document.body.clientWidth <= 1200) {
          num = 4;
        }
        const result = await this.$request.get(
          "/Investorservices/PeriodicReports",
          {
            params: {
              cid: this.$utils.getNavId("investorsReport"),
              page: this.page,
              pagenum: num,
              year: this.year,
              page_is: 1,
            },
          }
        );

        if (document.body.clientWidth <= 1200) {
          if (result.data.article.length > 0) {
            this.data.article = this.data.article.concat(result.data.article);
          } else {
            this.$message("没有更多数据了");
          }
        } else {
          this.data = result.data;
        }

        this.total = result.data.totalpage;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    // detail(e) {
    //   if (e.url) {
    //     window.open(e.url);
    //   } else {
    //     window.open(e.videofile, "_blank");
    //   }
    // },
    /**
     * 时间线事件更改
     */
    timeLineChanage(e) {
      this.page = 1;
      this.title = 1;
      this.year = e;
      this.data.article = [];
      this.getData();
    },
    more() {
      this.page++;
      this.getData();
    },

    nextPage() {
      if (this.total != 1 && this.page < this.total) {
        this.page++;
        this.getData();
      } else {
        this.$message("沒有更多数据了");
      }
    },
    /**
     * 页面跳转
     */
    pageChange(e) {
      // 设置页号
      console.log(e);
      this.page = e;
      // 获取数据
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .reportMobile {
    display: none;
  }

  .report {
    position: relative;
    height: 100%;
    width: 100%;

    .title {
      margin: 0 36px;
    }

    .time-line {
      margin-top: 20px;
    }

    .pagination {
      position: absolute;
      bottom: 0;
      right: 36px;
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
    }

    .list {
      padding: 0 36px;
      display: flex;
      //  gap: 32px;
      flex-wrap: wrap;

      .item {
        margin: 30px 12px;

        display: flex;
        flex-direction: column;
        align-items: center;
        width: 182px;

        .img {
          width: 182px;
          height: 240px;
        }

        .title-t {
          width: 182px;

          margin-top: 18px;
          @include fn.title();
          line-height: fn.rpx(18);
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .report {
    display: none;
  }

  .reportMobile {
    border-radius: fn.rpx(10);
    background-color: #fff;
    position: relative;
    width: 100%;
    padding-bottom: fn.rpx(60);

    .title {
      margin: fn.rpx(30);
    }

    .time-line {
      margin-top: fn.rpx(20);
    }

    .pagination {
      //position: absolute;
      // bottom: fn.rpx(20);
      // margin-top: fn.rpx(40);
      // width: 100%;
      // display: flex;
      // justify-content: center;
      cursor: pointer;
      margin: fn.rpx(20) 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .text {
        font-size: fn.rpx(16);
        color: color.$base;
      }

      .ic {
        margin-top: fn.rpx(4);
        width: fn.rpx(24);
        height: fn.rpx(24);
      }
    }

    .list {
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 fn.rpx(30);
      display: flex;
      //   flex-direction: column;
      //  height: fn.rpx(1100);
      // gap: fn.rpx(26);
      flex-wrap: wrap;

      .item {
        margin: fn.rpx(20) fn.rpx(10);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fn.rpx(295);

        .img {
          box-sizing: border-box;
          width: fn.rpx(295);
          height: fn.rpx(388);
        }

        .title-t {
          @include fn.title();
          line-height: fn.rpx(18);
          width: fn.rpx(182);
          margin-top: fn.rpx(25);
        }
      }
    }
  }
}
</style>